<template>
  <Modal
    v-model:visible="visibleModule"
    width="790px"
    height="auto"
    class="operation-skip"
    title="前后跳转"
    :resize="false"
    :maximizable="false"
    cancel-button
    :header-style="{ height: '50px' }"
    :body-style="{ padding: 0 }"
    :ok-button="addModule"
    @close="cancelModal"
  >
    <div class="operation-skip-context">
      <div v-if="loading" v-loading="loading" style="height: 200px"></div>
      <Form v-else :model="formModel" :label-col="{ span: 3 }" layout="vertical">
        <FormItem label="运行节点" name="runNodeId" v-bind="validateInfos.runNodeId">
          <div class="form-urae-user">
            <Row :gutter="[10, 10]">
              <Col v-for="item in runNodes" :key="item.id" :span="8">
                <div
                  :class="{ 'form-urae-user-item': true, select: item.id == formModel.runNodeId }"
                >
                  <div class="item-icon" @click="doNodeUsers(item)">
                    <i class="fas fa-user"></i>
                  </div>
                  <div style="display: inline-block; width: 2px; background: white"></div>
                  <div
                    class="item-text"
                    @click="doSelectNode({ type: 'runNodeId', id: item.id })"
                    >{{ item.text }}</div
                  >
                  <i class="icon fal fa-check" />
                </div>
              </Col>
            </Row>
          </div>
        </FormItem>
        <FormItem label="跳转节点" name="allNodeId" v-bind="validateInfos.allNodeId">
          <div class="form-urae-user">
            <Row :gutter="[10, 10]">
              <Col v-for="item in allNodes" :key="item.id" :span="8">
                <div
                  class="form-urae-user-item"
                  :class="{ 'form-urae-user-item': true, select: item.id == formModel.allNodeId }"
                >
                  <div class="item-icon" @click="doNodeUsers(item)">
                    <i class="fas fa-user"></i>
                  </div>
                  <div style="display: inline-block; width: 2px; background: white"></div>
                  <div
                    class="item-text"
                    @click="doSelectNode({ type: 'allNodeId', id: item.id })"
                    >{{ item.text }}</div
                  >
                  <i class="icon fal fa-check" />
                </div>
              </Col>
            </Row>
          </div>
        </FormItem>
      </Form>
    </div>
  </Modal>
  <WorkflowNodeUser
    v-if="nodeUserVisible"
    :data-info="dataInfo"
    :bean-id="beanId"
    :select-user-item="selectUserItem"
    @closeModal="doCloseModal"
  />
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import { Modal, Form, Row, Col } from '@jecloud/ui';
  import { getMonitorAllNode, adjustRunningNode } from '@/api/monitoring';
  import { verifyData } from '@/helper/common';
  import WorkflowNodeUser from './node-user.vue';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'WorkflowOperationSkip',
    components: { Modal, Form, FormItem: Form.Item, Row, Col, WorkflowNodeUser },
    props: {
      dataInfo: Object,
      beanId: String,
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      const state = reactive({
        loading: true,
        visibleModule: true,
        formModel: {
          runNodeId: '',
          allNodeId: '',
        },
        runNodes: [],
        allNodes: [],
        selectUserItem: {},
        nodeUserVisible: false,
      });
      const rulesRef = reactive({
        runNodeId: [verifyData.required],
        allNodeId: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(state.formModel, rulesRef, {
        onValidate: (...args) => {},
      });
      const methods = {
        // 确定按钮调用
        addModule: ({ $modal }) => {
          validate()
            .then(() => {
              adjustRunningNode({
                piid: props.dataInfo.piid,
                currentNodeId: state.formModel.runNodeId,
                toNodeId: state.formModel.allNodeId,
                prod: props.dataInfo.pd,
                tableCode: props.dataInfo.tableCode,
                funcCode: props.dataInfo.funcCode,
                funcId: props.dataInfo.funcId,
                beanId: props.beanId,
              })
                .then((data) => {
                  emit('closeModal', { type: 'skipShow', refresh: true });
                  Modal.notice(data.message, 'success');
                  $modal.close();
                })
                .catch((e) => {
                  Modal.notice(e.message, 'error');
                  $modal.close();
                });
            })
            .catch((error) => {});
          return false;
        },
        // 弹窗关闭调用
        cancelModal: () => {
          emit('closeModal', { type: 'skipShow' });
        },
        doSelectNode: ({ type, id }) => {
          state.formModel[type] = id;
        },
        // 节点对应的人员
        doNodeUsers: (item) => {
          state.selectUserItem = item;
          state.nodeUserVisible = true;
        },
        doCloseModal: () => {
          state.nodeUserVisible = false;
        },
      };
      const initNodeData = () => {
        state.loading = true;
        getMonitorAllNode({ piid: props.dataInfo.piid })
          .then((data) => {
            if (data) {
              const runData = [],
                allData = [];
              data.forEach((item) => {
                if (item.state == '1') {
                  allData.push({
                    id: item.taskDefinitionKey,
                    text: item.taskDefinitionName,
                    target: item.target,
                    taskId: item.taskId,
                  });
                } else {
                  runData.push({
                    id: item.taskDefinitionKey,
                    text: item.taskDefinitionName,
                    target: item.target,
                    taskId: item.taskId,
                  });
                }
              });
              state.allNodes = allData;
              state.runNodes = runData;
              state.loading = false;
            }
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
            state.loading = false;
          });
      };
      onMounted(() => {
        initNodeData();
      });
      return { ...toRefs(state), ...methods, validateInfos };
    },
  });
</script>
<style lang="less" scoped>
  .operation-skip {
    &-context {
      padding: 10px 40px 20px 40px;
      height: 100%;
      .form-urae-user {
        &-item {
          background-color: #f1f1f1;
          border-radius: 2px;
          cursor: pointer;
          height: 30px;
          line-height: 30px;
          overflow: hidden;
          position: relative;
          text-align: center;
          display: flex;
          .item-text {
            display: inline-block;
            flex: 1;
          }
          .item-icon {
            display: inline-block;
            width: 25px;
          }
          &::before {
            display: none;
            border: 13px solid transparent;
            border-bottom-color: #3265f5;
            bottom: -12px;
            content: '';
            position: absolute;
            right: -12px;
            transform: rotate(135deg);
          }
          .icon {
            display: none;
            bottom: 0;
            color: #fff;
            font-size: 12px;
            position: absolute;
            right: 0;
            z-index: 1;
          }
        }
        &-item.select {
          background-color: #d6e7ff;
          &::before {
            display: block;
          }
          .icon {
            display: block;
          }
        }
        &-item.select.women {
          background-color: #ffe9e9;
          &::before {
            border-bottom-color: #ffa3a3;
          }
        }
      }
    }
  }
</style>
